<template>
	<div id="app">
		<div class="tksp">
			<span class="heiz"><span class="pil">|</span>&emsp;批量退款审批</span>
			<span class="ssp">首页>审批管理>批量业务审核</span>
		</div>
		<div class="kuan">
			<div class="jin ss">
				<span class="qqrq">起止日期：</span>
				<el-radio-group v-model="radio1">
					<el-radio-button label="今天"></el-radio-button>
					<el-radio-button label="最近3天"></el-radio-button>
					<el-radio-button label="最近7天"></el-radio-button>
				</el-radio-group>
				<span class="block">
					&emsp;<el-date-picker v-model="value1" type="daterange" range-separator="~" start-placeholder="开始日期"
						end-placeholder="结束日期">
					</el-date-picker>
				</span>
			</div>
			<div class="shzt ss">
				<span class="qqrq">审核状态：</span>
				<el-radio-group v-model="radios1">
					<el-radio-button label="全部"></el-radio-button>
					<el-radio-button label="待审核"></el-radio-button>
					<el-radio-button label="审核通过"></el-radio-button>
					<el-radio-button label="驳回"></el-radio-button>
				</el-radio-group>
			</div>
			<div class="pch ss">
				<span class="qqrq pc">批次号：</span>
				<el-input class="wuyu" v-model="input" placeholder="请输入内容"></el-input>
			</div>
		</div>
		<div class="jyjl">
			<div class="t-head">共1,000笔交易记录</div>
			<table border="1" cellspacing="0" cellpadding="0" rules="all">
				<tr class="trtr">
					<td>业务类型|批次号</td>
					<td>申请时间</td>
					<td>审核状态</td>
					<td>申请人</td>
					<td>总金额(元)</td>
					<td>审核时间</td>
					<td>审核人</td>
					<td>操作</td>
				</tr>
			</table>
			<div class="table-none">没有符合条件的数据</div>
				<div class="footer">- 壹钱包商户服务平台 -</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				radio1: '1',
				radio2: '1',
				radio3: '1',
				radios1: '1',
				radios2: '1',
				radios3: '1',
				radios4: '1',
				options: [{
					value: '选项1',
					label: '退款'
				}, {
					value: '选项2',
					label: '提前结算'
				}, {
					value: '选项3',
					label: '批量代发'
				}, ],
				value: '',
				input: '',

			}


		},
	}
</script>

<style scoped="scoped">
	* {
		margin: 0;
		padding: 0;
	}

	.wuyu {
		width: 14%;
		height: 40px;
	}
	

	.tksp {
		width: 98%;
		height: 68px;
		line-height: 68px;
		margin-left: 1%;
		border-bottom: 1px solid #dddddd;
	}

	.heiz {
		display: inline-block;
		float: left;
		font-size: 20px;
	}
	.qqrq{
		font-size: 10px;
		color: #333333;
	}

	.pil {
		color: #1d85d7;
	}

	.ss {
		margin-top: 20px;
	}

	.ssp {
		display: inline-block;
		float: right;
		font-size: 13px;
		color: #666666;
	}

	.ch {
		margin-left: 27px;
	}

	.qqrq {
		margin-left: 1%;
	}

	.kuan {
		width: 98%;
		margin-left: 1%;
		border-bottom: 1px solid #dddddd;
	}

	.pch {margin-left: 10px;
		margin-bottom: 40px;
	}

	.jyjl {
		width: 98%;
		margin-left: 1%;

	}

	table {
		margin-top: 5px;
		width: 98%;
		line-height: 40px;
		text-align: center;
		border: 1px solid #dddddd;
		font-size: 12px;
		color: #333333;
	}

	.t-head {
		margin-top: 20px;
	}

	.footer {
		width: 98%;
		text-align: center;
		margin-top: 80px;
		font-size: 10px;
		color: #999999;
	}

	.table-none{
		width: 98%;
		text-align: center;
		height: 100px;
		line-height: 100px;
		border: 1px solid  #dddddd;
		border-top: 0px;
		color: #333333;
		font-size: 14px;
	}
</style>
